<!DOCTYPE html><head>
<title>LittleJS Stress Test</title>
<meta charset=utf-8>
<meta name=apple-mobile-web-app-capable content=yes>
<meta name=mobile-web-app-capable content=yes>
<link rel=icon type=image/png href=../favicon.png>
</head><body>
<script type=module>

/*
    LittleJS Stress Test
    - Render over 100,000 sprites at 60 fps in Chrome
    - Also plays music in the background with zzfxm
    - All code and the image is contained in this html file
*/

'use strict';

// import LittleJS module
import * as LJS from '../../dist/littlejs.esm.min.js';
const {vec2, rgb} = LJS;

// keep our own list of simple sprites and track fps
let sprites, tileLayer, timeMS, fpsDisplay, statsDisplay, spriteColor, spriteAdditiveColor, musicInstance, hasClicked;

///////////////////////////////////////////////////////////////////////////////

class TestObject extends LJS.EngineObject
{
    constructor(pos)
    {
        super(pos, vec2(1), LJS.tile(0), 0, spriteColor);
        this.additiveColor = spriteAdditiveColor;
        this.setCollision();
    }
}

///////////////////////////////////////////////////////////////////////////////
function gameInit()
{
    // create tile collision ground for objects to collide with
    tileLayer = new LJS.TileCollisionLayer(vec2(), vec2(99,55));
    for (let x = tileLayer.size.x; x--;)
        tileLayer.setCollisionData(vec2(x,0));

    // set things up
    LJS.setCanvasFixedSize(vec2(1920, 1080)); // 1080p
    LJS.setCameraScale(20);
    LJS.setCameraPos(tileLayer.size.scale(.5));
    LJS.setCanvasClearColor(rgb(.4,.4,.4));
    LJS.setGravity(vec2(0,-.005));
    sprites = [];

    // display stats using a div so it doesn't use canvas rendering
    document.body.appendChild(statsDisplay = document.createElement('div'));
    statsDisplay.style = 'position:absolute;width:100%;font-size:3em;text-align:center;font-family:arial;user-select:none;';
}

///////////////////////////////////////////////////////////////////////////////
function gameUpdate()
{
    // mouse click = change color
    if (LJS.mouseWasPressed(0) || LJS.mouseIsDown(2))
    {
        hasClicked = true;
        spriteColor = LJS.randColor();
        spriteAdditiveColor = LJS.randColor(rgb(.5,.5,.5, 0), rgb(0,0,0,0));
    }
    
    // right click = drop test object
    if (LJS.mouseIsDown(2))
        new TestObject(LJS.mousePos);

    // mouse hold = add objects
    if (LJS.mouseIsDown(0))
    {
        spriteColor = spriteColor.mutate();
        spriteAdditiveColor = spriteAdditiveColor.mutate();
        for (let i=100;i--;)
            sprites.push({
                pos:LJS.mousePos.add(LJS.randInCircle(2)),
                angle:LJS.rand(2*LJS.PI),
                velocity:LJS.randInCircle(.2),
                color:spriteColor.rgbaInt(),
                additiveColor:spriteAdditiveColor.rgbaInt()
            });
    }
    
    // mouse wheel = zoom
    LJS.setCameraScale(LJS.clamp(LJS.cameraScale*(1-LJS.mouseWheel/10), 1, 1e3));
    
    // mouse click = play music
    if (hasClicked)
    {
        if (!musicInstance)
            musicInstance = music.play();
        else if (!musicInstance.isPlaying())
            musicInstance.start();
    }
}

///////////////////////////////////////////////////////////////////////////////
function gameUpdatePost()
{
}

///////////////////////////////////////////////////////////////////////////////
function gameRender()
{
    // track fps and update stats
    const frameTimeMS = Date.now();
    fpsDisplay = LJS.lerp(fpsDisplay||0, 1e3/(frameTimeMS - timeMS||1), .05);
    timeMS = frameTimeMS;

    // show stats 
    const spriteCount = sprites.length
    const objectCount = LJS.engineObjects.length;
    statsDisplay.innerText =
        spriteCount + objectCount ?
            spriteCount + ' Sprites / '
            + (objectCount ? objectCount + ' Objects / ' : '')
            + fpsDisplay.toFixed(1) + ' FPS'
        : 'LittleJS Stress Test\nLeft Click = Add Sprites\nRight Click = Add Objects';

    // position stats
    const canvasRect = LJS.mainCanvas.getBoundingClientRect();
    statsDisplay.style.top = canvasRect.top+'px';
    statsDisplay.style.fontSize = canvasRect.width*.04+'px';

    // update sprites
    for (const sprite of sprites)
    {
        // apply velocity and gravity
        sprite.pos.x += sprite.velocity.x;
        sprite.pos.y += sprite.velocity.y += LJS.gravity.y;

        // bounce
        if (sprite.pos.y < 0)
        {
            sprite.pos.y = 0;
            sprite.velocity.y = LJS.rand(.3,.8);
        }
        if (sprite.pos.x < 0)
            sprite.pos.x = 0, sprite.velocity.x *= -1;
        if (sprite.pos.x > tileLayer.size.x)
            sprite.pos.x = tileLayer.size.x, sprite.velocity.x *= -1;

        // rotate sprite
        sprite.angle += sprite.velocity.x > 0 ? .02 : -.02;

        // draw the sprite directly using glDraw for extra speed
        LJS.glDraw(sprite.pos.x, sprite.pos.y, 1, 1, sprite.angle, 0, 0, 1, 1,
            sprite.color, sprite.additiveColor);
    }
}

///////////////////////////////////////////////////////////////////////////////
function gameRenderPost()
{
}

///////////////////////////////////////////////////////////////////////////////
// load tiles image via url data
const tilesImageData = '';

///////////////////////////////////////////////////////////////////////////////
// Startup LittleJS Engine
LJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, [tilesImageData]);

///////////////////////////////////////////////////////////////////////////////
// music - Depp Loop
const music = new LJS.ZzFXMusic([[[.6,0,77,,,1,1,.5,,,,,.1,,,.05,,.5,.4,.2],[,0,43,.01,,.2,2,,,,,,,,,,.01],[,0,170,.003,,.008,,.97,-35,53,,,,,,.1],[.8,0,270,,,.12,3,1.65,-2,,,,,4.5,,.02],[,0,86,,,.1,,.7,,,,.5,,6.7,1,.05],[,0,41,,.05,.4,2,0,,,9,.01,,,,.08,.02],[,0,2200,,,.04,3,2,,,800,.02,,4.8,,.01,.1],[.3,0,16,,,.3,3]],[[[1,-1,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33],[3,1,22,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,24,,,,,,,,,,,,,,,,,,,,,,,,22,,22,,22,,,,],[5,-1,21,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,23,,,,,,,,,,,,,,,,,,,,,,,,24,,23,,21,,,,],[,1,21,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,23,,,,,,,,,,,,,,,,,,,,,,,,24,,23,,21,,,,]],[[1,-1,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33],[3,1,24,,,,,,,,27,,,,,,,,,,,,,,,,27,,,,24,,,,24,,,,,,,,27,,,,,,,,,,,,,,,,24,,24,,24,,,,],[5,-1,21,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,23,,,,,,,,,,,,,,,,,,,,,,,,24,,23,,21,,,,],[,1,21,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,23,,,,,,,,,,,,,,,,,,,,,,,,24,,23,,21,,,,],[6,1,,,34,34,34,,,,,,34,34,,,,,34,,,,34,34,,,,,34,,,,34,,,,34,34,34,,,,,,34,,,,,,34,34,,,34,34,,,,,,,,,34,34],[4,1,,,,,,,24,,,,,,24,,24,,,,24,,,,24,,,,,,,,,,,,,,,,24,,,,,,24,,24,,,,24,,,,24,,,,,,,,,,]],[[1,-1,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,23,23,35,23,23,36,23,23,35,23,23,36,23,23,35,35,23,23,35,23,23,35,23,23,36,23,23,35,23,23,36,36],[5,-1,21,,,19,,,21,,,,,,,,,,21,,,19,,,17,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,],[3,1,24,,,24,,,24,,,,,,,,,,24,,,24,,,24,,,,24.75,24.5,24.26,24.01,24.01,24.01,,,,,25,,,,,,,,25,,,,,,,,25,,,,,,,,25,25,25,25],[4,-1,,,,,,,,,,,,,,,,,,,,,,,,,,,24.75,24.5,24.26,24.01,24.01,24.01,24.01,24,,24,24,,24,24,24,24,,24,24,,24,,24,24,,24,24,,24,24,24,24,,24,24,,24,24],[7,-1,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,23,,21,23,,35,,23,,21,23,,35,,35,,23,,21,23,,35,,21,23,,35,,21,23,,,],[6,1,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,34,36,34,,33,34,34,36,31,36,34,,31,34,32,,33,36,34,,31,34,34,36,33,36,33,,31,,,]],[[1,-1,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,17,17,29,17,17,29,17,17,29,17,17,29,17,17,29,29,17,17,29,17,17,29,17,17,29,17,17,29,17,17,29,29],[4,1,24,24,,24,24,,24,24,24,24,,24,24,,24,,24,24,,24,24,,24,24,24,24,,24,24,,24,24,24,24,,24,24,,24,24,24,,,24,24,,24,,24,24,,24,24,,24,24,24,24,,24,24,,24,24],[7,-1,21,,19,21,,33,,21,,19,21,,33,,33,,21,,19,21,,33,,21,,19,21,,33,,33,,17,,17,17,29,17,17,29,17,,17,17,29,17,17,29,17,,17,17,29,17,17,29,17,,17,17,29,17,17,29],[2,1,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,,,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,,,],[6,1,,,36,,,,,,36,,36,,,,,,,,36,,,,,,36,,36,,,,,,,,36,,,,,,,,,,,,,,,,36,,,,,,36,,36,,,,,,],[3,1,,,,,25,,,,,,,,25,,,,,,,,25,,,,,,,,25,25,25,25,,,,,25,,,,,25,,,25,,,,,,,,25,,,,,,,,25,25,25,25]],[[1,-1,14,14,26,14,14,26,14,14,26,14,14,26,14,14,26,26,14,14,26,14,14,26,14,14,26,14,14,26,14,14,26,26,17,17,29,17,17,29,17,17,29,17,17,29,17,17,29,29,19,19,31,19,19,31,19,19,31,19,19,31,19,19,31,31],[4,1,24,24,,24,24,,24,24,24,24,,24,24,,24,,24,24,,24,24,,24,24,24,24,,24,24,,24,24,24,24,,24,24,,24,24,24,24,,24,24,,36,,24,24,,24,24,,24,24,24,24,,24,24,,24,24],[7,-1,14,,14,14,26,14,14,26,14,,14,14,26,14,14,26,14,,14,14,26,14,14,26,14,,14,14,26,14,14,26,17,,17,17,29,17,17,29,17,,17,17,29,17,17,29,19,,19,19,31,19,19,31,19,,19,19,31,19,19,31],[2,1,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,,,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,,,],[3,1,,,,,25,,,,,,,,25,,,,,,,,25,,,,,,,,25,25,25,25,,,,,25,,,,,,,,25,,,,,,,,25,,,,,,,,25,25,25,25],[6,1,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,34,,,,,,34,,34,,,,,,,,34,,,,,,34,,34,,,,,,]]],[0,1,1,2,3,4,4]]);
</script>